<template>
  <div class="home">
    <!-- 步骤条 -->
    <el-steps :active="counter" align-center>
      <el-step title="新人寄语"></el-step>
      <el-step title="入职须知"></el-step>
      <el-step title="入职登记"></el-step>
      <el-step title="入职材料"></el-step>
      <el-step title="协议签署"></el-step>
    </el-steps>

    <!-- 新人寄语 -->
    <div v-show="counter === 0" class="container">
      <NewWords :user="user" />
    </div>

    <!-- 入职须知 -->
    <div v-show="counter === 1" class="container">
      <Information />
    </div>

    <!-- 入职登记表填写 -->
    <div v-show="counter === 2" class="container">
      <el-form :model="user" :inline="true">
        <div class="form-box">
          <el-form-item label="部门" prop="distribution_department">
            <el-input v-model="user.distribution_department" readonly placeholder="由HR填写"></el-input>
          </el-form-item>
          <el-form-item label="入职日期" prop="entry_date">
            <el-input readonly v-model="user.entry_date" placeholder="请输入"></el-input>
          </el-form-item>
        </div>
        <div class="form-box">
          <div class="form-title">基本信息</div>
          <el-form-item label="姓名" prop="name">
            <el-input v-model="user.name" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="民族" prop="nation">
            <el-select v-model="user.nation" placeholder="请选择">
              <el-option
                v-for="nation in nationList"
                :key="nation.value"
                :label="nation.label"
                :value="nation.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="政治面貌" prop="political_status" placeholder="请选择">
            <el-select v-model="user.political_status">
              <el-option v-for="item in politicalList" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="证件类型" prop="certification_type">
            <el-select v-model="user.certification_type" placeholder="请选择">
              <el-option v-for="item in cardList" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <nut-textinput
            v-model="user.certification_number"
            label="证件号码"
            placeholder="请输入"
            :hasBorder="false"
          />
          <el-form-item label="性别" prop="sex">
            <el-select v-model="user.sex" placeholder="请选择">
              <el-option
                v-for="item in genderList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="生日" prop="birth">
            <el-date-picker
              v-model="user.birth"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              type="date"
              placeholder="请选择"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="婚姻状况 " prop="is_marry">
            <el-select v-model="user.is_marry" placeholder="请选择">
              <el-option
                v-for="item in marryList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="籍贯" prop="native_place">
            <el-input v-model="user.native_place" placeholder="如：云南-大理"></el-input>
          </el-form-item>
          <el-form-item label="户籍地址" prop="registered_residence" v-if="false">
            <el-input v-model="user.registered_residence" placeholder="请输入"></el-input>
          </el-form-item>
        </div>
        <div class="form-box">
          <div class="form-title">工资卡信息</div>
          <el-form-item label="工资卡开户行" prop="bank_card_deposit">
            <el-input v-model="user.bank_card_deposit" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="工资卡卡号" prop="bank_card_no">
            <el-input v-model="user.bank_card_no" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="银行名称" prop="bank_card">
            <el-input v-model="user.bank_card" placeholder="请输入"></el-input>
          </el-form-item>
        </div>
        <div class="form-box" v-if="false">
          <div class="form-title">社保公积金信息</div>
          <el-form-item label="社保账号" prop="social_account_number">
            <el-input v-model="user.social_account_number" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="公积金账号" prop="fund_account_number">
            <el-input v-model="user.fund_account_number" placeholder="请输入"></el-input>
          </el-form-item>
        </div>
        <div class="form-box">
          <div class="form-title">联系信息</div>
          <el-form-item label="手机号码" prop="mobile">
            <el-input v-model="user.mobile" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="个人邮箱" prop="email">
            <el-input v-model="user.email" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="现居住地" prop="current_residence">
            <el-input v-model="user.current_residence" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="户籍地址" prop="hukou_detail_address">
            <el-input v-model="user.hukou_detail_address" placeholder="请输入"></el-input>
          </el-form-item>
        </div>

        <!-- 教育经历 -->
        <div class="form-box">
          <div class="form-title">教育经历</div>
          <div class="form-body">
            <nut-cell
              v-for="education in educationList"
              :key="education.id"
              :isLink="true"
              :title="education.graduate_institutions"
              :subTitle="education.graduation_major +'|'+ education.education"
              :desc="education.end_time +  '毕业'"
              :showIcon="true"
              @click.native="edit(education, 'showEducationDialog')"
            ></nut-cell>
          </div>
          <div class="form-footer">
            <el-link
              type="primary"
              @click.native="add('showEducationDialog')"
              icon="el-icon-plus"
            >添加教育经历</el-link>
          </div>
        </div>

        <!-- 工作经历 -->
        <div class="form-box">
          <div class="form-title">工作经历</div>
          <div class="form-body">
            <nut-cell
              v-for="item in workerList"
              :key="item.id"
              :isLink="true"
              :title="item.work_unit"
              :subTitle="item.post"
              :desc="item.start_time + '至' + item.end_time"
              :showIcon="true"
              @click.native="edit(item, 'showWorkerDialog')"
            ></nut-cell>
          </div>
          <div class="form-footer">
            <el-link
              type="primary"
              icon="el-icon-plus"
              @click.native="add('showWorkerDialog')"
            >添加工作经历</el-link>
          </div>
        </div>

        <!-- 紧急联系人 -->
        <div class="form-box">
          <div class="form-title">
            <span class="required">*</span> 紧急联系人
          </div>
          <div class="form-body">
            <nut-cell
              v-for="item in emergencyList"
              :key="item.id"
              :isLink="true"
              :title="`${item.name}（${item.relationship}）`"
              :subTitle="item.phone"
              :showIcon="true"
              @click.native="edit(item, 'showEmergencyDialog')"
            ></nut-cell>
          </div>
          <div class="form-footer">
            <el-link
              type="primary"
              icon="el-icon-plus"
              @click.native="add('showEmergencyDialog')"
            >添加紧急联系人</el-link>
          </div>
        </div>

        <div class="form-box">
          <div class="form-title">
            <span class="required">*</span> 家庭成员
          </div>
          <div class="form-body">
            <nut-cell
              v-for="item in relationshiopList"
              :key="item.id"
              :isLink="true"
              :title="`${item.name}（${item.relationship}）`"
              :subTitle="item.work_unit"
              @click.native="edit(item, 'showRelationshipDialog')"
              :showIcon="true"
            ></nut-cell>
          </div>
          <div class="form-footer">
            <el-link
              type="primary"
              icon="el-icon-plus"
              @click.native="add('showRelationshipDialog')"
            >添加家庭成员</el-link>
          </div>
        </div>

        <div class="form-box">
          <div class="form-title">入职声明与签名</div>
          <div class="form-body">
            <h5>入职声明</h5>
            <p>1、本人承诺以上各项信息资料均真实完整有效，因此引发的后果及责任由员工本人自行承担。</p>
            <p>2、对以上《入职须知》以及《员工手册》本人已清晰了解并同意，本人一定会严格遵守公司相关管理制度，如有违反愿意接受公司相关处罚。</p>
            <p>3、公司保留审查员工所提供个人资料的权利。</p>
            <h5>手写签名</h5>
            <div class="autograph">
              <div
                v-if="user.sign"
                style="text-align: center;cursor: pointer;"
                @click="showAutograph = !showAutograph"
              >
                <img style="width: 100%;" :src="user.sign" alt />
              </div>
              <div
                v-else
                @click="showAutograph = !showAutograph"
                style="cursor: pointer; text-align: center;"
              >
                <i class="el-icon-edit"></i> 点击签名
              </div>
            </div>
          </div>
        </div>
      </el-form>
    </div>

    <!-- 上传资料 -->
    <div v-show="counter === 3" class="container">
      <UploadData :user="user" />
    </div>

    <!-- 保密协议签订 -->
    <div v-show="counter === 4" class="container">
      <Protected :user="user" />
    </div>

    <div class="footer">
      <div class="btns">
        <el-button
          :style="getWidth('prev')"
          @click="counter > 0 ? counter-- : false"
          :loading="loading"
          class="btn-prev"
        >上一步</el-button>
        <el-button
          :style="getWidth('next')"
          class="btn-next"
          @click="btnNext"
          :loading="loading"
        >{{counter === 4 ? '提交' : '下一步'}}</el-button>
      </div>
    </div>

    <!-- 签名程序 -->
    <div id="autograph" v-if="showAutograph">
      <el-dialog
        lock-scroll
        :show-close="false"
        top="0"
        width="100%"
        :visible.sync="showAutograph"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        custom-class="custom-dialog"
      >
        <Autograph @success="autographSuccess" @cancel="showAutograph = !showAutograph" />
      </el-dialog>
    </div>

    <!-- 教育经历增删改 -->
    <Education
      :is-visible="showEducationDialog"
      :row="row"
      @close="close('showEducationDialog')"
      @finished="finishedEducation"
    />

    <!-- 工作经历 -->
    <Worker
      :is-visible="showWorkerDialog"
      :row="row"
      @close="close('showWorkerDialog')"
      @finished="finishedWorker"
    />

    <!-- 紧急联系人 -->
    <Emergency
      :is-visible="showEmergencyDialog"
      :row="row"
      @close="close('showEmergencyDialog')"
      @finished="finishedEmergency"
    />

    <!-- 家庭成员 -->
    <Relationship
      :is-visible="showRelationshipDialog"
      :row="row"
      @close="close('showRelationshipDialog')"
      @finished="finishedRelationship"
    />
  </div>
</template>

<script>
import Autograph from '@/components/Autograph'
import Education from '@/components/Education'
import Worker from '@/components/Worker'
import Emergency from '@/components/Emergency'
import Relationship from '@/components/Relationship'
import UploadData from '@/components/UploadData'
import Protected from '@/components/Protected'
import NewWords from '@/components/NewWords'
import Information from '@/components/Information'
export default {
  name: 'Home',
  data () {
    return {
      uuid: '',
      counter: 0,
      showAutograph: false,
      isCardVisible: false,
      isNationVisible: false,
      errorMsg: '服务器开了个小差，请稍候再试',
      form: {},
      rules: {},
      user: {},
      row: {},
      loading: false,
      cardList: [], // 证件类型
      politicalList: [], // 政治面貌
      nationList: [], // 民族列表
      genderList: [], // 性别
      marryList: [], // 婚否
      showEducationDialog: false, // 是否显示教育经历框
      educationList: [], // 教育列表
      showWorkerDialog: false,
      workerList: [], // 工作列表
      showEmergencyDialog: false,
      emergencyList: [], // 紧急联系人列表
      showRelationshipDialog: false,
      relationshiopList: []
    }
  },
  mounted () {
    // 获取uuid
    this.uuid = this.$route.query.uuid
    // 获取用户信息
    this.getUserInfo()
    // 获取配置文件
    this.getConfig()
    // 获取教育经历
    this.getEducation()
    // 获取工作经历
    this.getWorker()
    // 获取紧急联系人列表
    this.getEmergency()
    // 获取家人
    this.getRelationship()
  },
  methods: {
    // 获取教育经历
    getEducation () {
      this.$axios.get(`/home/user/education/uuid/${this.uuid}`)
        .then(response => {
          if (response.data.code === 1) {
            this.educationList = response.data.data
          }
        })
        .catch(() => { })
    },
    // 获取工作经验
    getWorker () {
      this.$axios.get(`/home/worker/get/uuid/${this.uuid}`)
        .then(response => {
          if (response.data.code === 1) {
            this.workerList = response.data.data
          }
        })
        .catch(() => { })
    },
    // 获取紧急联系人
    getEmergency () {
      this.$axios.get(`/home/emergency/get/uuid/${this.uuid}`)
        .then(response => {
          if (response.data.code === 1) {
            this.emergencyList = response.data.data
          }
        })
        .catch(() => { })
    },
    // 获取家人列表
    getRelationship () {
      this.$axios.get(`/home/relationship/get/uuid/${this.uuid}`)
        .then(response => {
          if (response.data.code === 1) {
            this.relationshiopList = response.data.data
          }
        })
        .catch(() => { })
    },
    // 获取配置文件
    getConfig () {
      this.$axios.get('/admin/personal.config/get')
        .then(response => {
          if (response.data.code === 1) {
            localStorage.setItem('config', JSON.stringify(response.data.data))
            this.cardList = response.data.data.certification_setting
            this.politicalList = response.data.data.political_setting
            this.nationList = response.data.data.nation_setting
            this.genderList = response.data.data.sex_setting
            this.marryList = response.data.data.is_marry
          } else {
            this.$message.warning(response.data.msg)
          }
        })
        .catch(() => {
          this.$toast.fail(this.errorMsg)
        })
    },

    // 获取用户信息
    getUserInfo () {
      if (!this.uuid) {
        this.$toast.fail('用户信息验证失败')
      } else {
        // 获取用户信息
        this.$axios.get(`/home/user/get/uuid/${this.uuid}`)
          .then(response => {
            if (response.data.code === 1) {
              this.user = response.data.data
            } else {
              this.$toast.fail(response.data.msg)
            }
          })
          .catch(() => {
            this.$toast.fail(this.errorMsg)
          })
      }
    },

    // 下一步、完成
    btnNext () {
      this.loading = true
      if (this.counter === 4) {
        // 提交
        this.$axios.post('/home/user/save', this.user)
          .then(response => {
            this.loading = false
            if (response.data.code === 1) {
              this.$toast.success('入职手续已完成，开启你的新篇章！', {
                cover: true,
                onClose: function () {
                  window.location.href = 'http://www.tuobai.net'
                }
              })
            } else {
              this.$toast.fail(response.data.msg)
            }
          })
          .catch(() => {
            this.loading = false
            this.$toast.fail(this.errorMsg)
          })
      } else {
        if (this.counter < 4) {
          this.loading = false
          this.counter += 1
        }
      }
    },

    // 动态获取屏幕宽度
    getWidth (type) {
      let definedStyle
      if (type === 'prev') {
        if (this.counter === 0) {
          definedStyle = {
            width: 0,
            display: 'none'
          }
        } else {
          definedStyle = {
            width: '30%',
            display: 'block'
          }
        }
      } else {
        if (this.counter === 0) {
          definedStyle = {
            width: '100%',
            display: 'block'
          }
        } else {
          definedStyle = {
            width: '70%',
            display: 'block'
          }
        }
      }

      return definedStyle
    },

    // 签名成功回调
    autographSuccess (img) {
      this.user.sign = img
      this.showAutograph = !this.showAutograph
    },

    add (field) {
      this.row = {}
      this[field] = true
    },

    close (field) {
      this[field] = false
    },

    edit (row, field) {
      this.row = row
      this[field] = true
    },

    // 教育经历操作成功
    finishedEducation (row) {
      this.getEducation()
      this.close('showEducationDialog')
    },

    // 工作经历操作成功
    finishedWorker (row) {
      this.getWorker()
      this.close('showWorkerDialog')
    },

    // 紧急联系人
    finishedEmergency (row) {
      this.getEmergency()
      this.close('showEmergencyDialog')
    },

    // 家庭成员
    finishedRelationship (row) {
      this.getRelationship()
      this.close('showRelationshipDialog')
    }
  },
  components: {
    Autograph,
    Education,
    Worker,
    Emergency,
    Relationship,
    UploadData,
    Protected,
    NewWords,
    Information
  }
}
</script>
<style lang="stylus">
@import "../style.styl"
</style>
